<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">认证进度</view>
			</block>
		</cu-custom>
		<view class="padding-top-48 padding-left-32 padding-right-32">
			<view class="jd-content">
				<view class="step-content">
					<!-- 预约 -->
					<view class="step-box" >
						<view class="step-left">
							<view class="step-circle">
								<image src="https://txr001.zthj.net/static/img/tcheck.png" class="img-22"></image>
							</view>
							<view class="step-line"></view>
						</view>
						<view class="step-right">
							<view class="step-title">提交认证申请</view>
							<view class="step-p">用户选择第三方服务机构，提交认证申请</view>
						</view>
					</view>
					<view class="step-box" >
						<view class="step-left">
							<view class="step-circle">
								<image src="https://txr001.zthj.net/static/img/tcheck.png" class="img-22"></image>
							</view>
							<view class="step-line"></view>
						</view>
						<view class="step-right">
							<view class="step-title">基础信息审核中</view>
							<view class="step-p">等待第三方服务机构确认</view>
						</view>
					</view>
					<view class="step-box" >
						<view class="step-left">
							<view class="step-circle">
								<image src="https://txr001.zthj.net/static/img/tg.png" class="img-22"></image>
							</view>
							<view class="step-line"></view>
						</view>
						<view class="step-right">
							<view class="step-title">已通过</view>
							<view class="step-p">等待认证结果</view>
						</view>
					</view>
					<view class="step-box" >
						<view class="step-left">
							<view class="step-circle">
								<image src="https://txr001.zthj.net/static/img/wc.png" class="img-22"></image>
							</view>
							<!-- <view class="step-line"></view> -->
						</view>
						<view class="step-right">
							<view class="step-untitle">已完成</view>
							<view class="stop-unp">查看认证报告</view>
						</view>
					</view>
				</view>
				
				<view class="btn-content">
					<button class="cu-btn sure-btn">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataArray: [{
					title: '提交认证申请',
					content: '用户选择第三方服务机构，提交认证申请',
					active: false
				}, {
					title: '基础信息审核中',
					content: '等待第三方服务机构确认',
					active: false
				}, {
					title: '已通过',
					content: '等待认证结果',
					active: false
				}, {
					title: '已完成',
					content: '查看认证报告',
					active: false
				}]
			}
		},
		onLoad() {},
		methods: {
			hideModal(){
				this.modalName=""
			},
			checkTarget(item){
				item.check=!item.check
			}
		}
	}
</script>

<style>
	page{background: linear-gradient(180deg, rgba(244,244,244,0) 10%, #F4F4F4 19%);}
</style>
<style scoped lang="less">
	.jd-content{
		background: #FFFFFF;
		border-radius: 48rpx;
		padding: 32rpx;
	}
	.step-content{
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		.step-box{
			width: 100%;
			display: flex;
			// align-items: center;
			.step-left{
				width: 28rpx;
				.step-circle{
					// width: 28rpx;
					// height: 28rpx;
					// border: 6rpx solid #02BD7C;
					// border-radius: 100%;
				}
				.step-line{
					width: 2rpx;
					height: 100rpx;
					background: #24458E;
					position: relative;
					left: 12rpx;
					top: 10rpx;
				}
			}
			.step-right{
				width: 624rpx;
				margin-left: 12rpx;
				.step-title{
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					// line-height: 44rpx;
					position: relative;
					// top: -10rpx;
					margin-bottom: 12rpx;
				}
				.step-untitle{
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
					// line-height: 44rpx;
					position: relative;
					// top: -10rpx;
					margin-bottom: 12rpx;
				}
				.step-p{
					// padding-top:12rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
				.stop-unp{
					font-size: 24rpx;
					font-weight: 400;
					color: #CCCCCC;
				}
				.step-title1{
					color: #F6685D;
				}
				.step-p1{
					color: #F6685D;
				}
			}
		}
	}
	.btn-content{
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.sure-btn{
			width: 454rpx;
			height: 88rpx;
			background: #24458E;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>